<template>
  <div class="app-container">
<!--    查询组件-->
    <div style="height: auto">
      <div style="">
        <el-button   type="primary" @click="handleCreate" >添加出库</el-button>
        <div>
          <el-form ref="QueryFrom" :model="exQuery">
            <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQuery" >查询</el-button>
            <el-select  placeholder="出库类型" v-model="exQuery.type" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
              <el-option
                v-for="itemquery in queryTypeoptions"
                :key="itemquery.label"
                :label="itemquery.label"
                :value="itemquery.value">
              </el-option>
            </el-select>
            <el-select  placeholder="状态" v-model="exQuery.status" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
              <el-option
                v-for="itemquery in queryStatusoptions"
                :key="itemquery.label"
                :label="itemquery.label"
                :value="itemquery.value">
              </el-option>
            </el-select>
            <el-input  placeholder="出库编号" v-model="exQuery.exNum" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
          </el-form>
        </div>
      </div>
    </div>

<!--    表格组件-->
    <el-table
      ref="purTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <!-- 展开折叠部分 -->
      <el-table-column type="expand" width="1" style="display: none;border-right: 0px solid #ebeef5">
<!--        <template slot-scope="props">-->
<!--          <el-table-->
<!--            v-loading="listLoading"-->
<!--            :data="list[props.$index].extable"-->
<!--            style="width: 100%"-->
<!--            max-height="250">-->
<!--            <el-table-column-->
<!--              fixed-->
<!--              label="发票编号"-->
<!--              width="120">-->
<!--              <template slot-scope="scopeBill">-->
<!--                {{scopeBill.row.billNum}}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              label="开票日期"-->
<!--              width="120">-->
<!--              <template slot-scope="scopeBill">-->
<!--                {{scopeBill.row.billDate}}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </template>-->
      </el-table-column>

      <el-table-column label="出库编号" width="300">
        <template slot-scope="scope">
          {{ scope.row.exNum }}
        </template>
      </el-table-column>
      <el-table-column label="出库日期" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.exDate}}
        </template>
      </el-table-column>
      <el-table-column label="出库类型" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="创建者" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.createAdminTrueName }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.createDate }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status >= 1"> 作废</span>
          <span v-if="scope.row.status == 0"> 正常</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button plain style="float: left" @click="toogleExpand(scope.row)">详情</el-button>
          <el-button type="primary" style="float: left" @click="handleChange(scope.row)">作废</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>


    <!-- 新增标签弹层 -->
    <div >

      <el-dialog title="添加采购合同" :visible.sync="dialogFormVisible">

        <el-form ref="dataAddForm" :model="contractData" :rules="rules" label-position="right" label-width="100px" enctype='multipart/form-data'>
          <div >
            <el-row>

              <el-col>
                <el-form-item label="类型表示" prop="contractType">
                  <!--                <el-input v-model="contractData.state"/>-->
                  <el-select v-model="contractData.contractType" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="合同编号" prop="contractNum">
                  <el-input v-model="contractData.contractNum"/>
                </el-form-item>
              </el-col>
              <el-col >
                <el-form-item label="合同日期" prop="contractDate">
                  <!--                <el-input v-model="contractData.contractDate"/>-->
                  <el-date-picker
                    v-model="contractData.contractDate"
                    type="date"
                    placeholder="选择合同日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="供应商"  prop="supplier">
                  <el-input v-model="contractData.supplier"/>
                </el-form-item>
              </el-col>
              <br>
              <el-col :span="13">
                <el-form-item label="合同金额" prop="contractMoney">
                  <el-input v-model="contractData.contractMoney"/>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="备注信息" prop="remarks">
                  <el-input v-model="contractData.remarks"/>
                  <!--                <el-input v-model="contractData.remarks" type="textarea"></el-input>-->
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="附件" prop="files">
                  <el-upload
                    ref="upload"
                    class="upload-demo"
                    action="/purchase/add"
                    :http-request="httpRequest"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-change="change"
                    multiple
                    :limit="5"
                    :auto-upload="false"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，不超过5个文件</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div >

        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button @click="cancel()">取消</el-button>

          <el-button type="primary" @click="handleAdd()">确定</el-button>

        </div>

      </el-dialog>

    </div>

<!--添加发票抽屉-->
    <el-drawer
      title="添加发票"
      size="50%"
      :visible.sync="drawer">


      <el-form ref="databillForm" :model="billData" label-position="right" label-width="100px" enctype='multipart/form-data'>

          <el-row>

            <el-col :span="13">
              <el-form-item label="发票编号" prop="billNum">
                <el-input v-model="billData.billNum"/>
              </el-form-item>
            </el-col>
            <el-col >
              <el-form-item label="发票日期" prop="billDate">
                <!--                <el-input v-model="contractData.contractDate"/>-->
                <el-date-picker
                  v-model="billData.billDate"
                  type="date"
                  placeholder="选择发票日期">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="13">
              <el-form-item label="发票金额" prop="billMoney">
                <span v-text="billData.billMoney"/>
              </el-form-item>
            </el-col>

            <el-col :span="13">
              <el-form-item label="发票类型" prop="billType">
                <el-select  placeholder="发票类型" v-model="billData.billType">
                  <el-option
                    v-for="itemquery in optionsBill"
                    :key="itemquery.label"
                    :label="itemquery.label"
                    :value="itemquery.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col>
              <el-form-item label="附件" prop="files">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  :http-request="httpRequest"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-change="change"
                  multiple
                  :limit="5"
                  :auto-upload="false"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，不超过5个文件</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

            <el-table
              border
              :data="billData.billGood">

              <el-table-column label="品名" prop="billData" width="150" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.modle"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" width="150" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.goodsName"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="型号" width="150" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.xx1"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="采购数量" width="100" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.xx2"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="单价" width="100" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.xx3"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="金额" width="100" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.xx4"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" @click.prevent="addBillRow()">增加</el-button>
                  <el-button type="danger" @click.prevent="delBillRow()">删除</el-button>
                </template>
              </el-table-column>




            </el-table>

      </el-form>


      <div slot="footer" class="dialog-footer">

        <el-button @click="drawer =cancel">取消</el-button>

        <el-button type="primary" @click="handleBillAdd()">确定</el-button>

      </div>




    </el-drawer>

  </div>
</template>

<script>
import api from '@/api/exHouse'
import { parseTime } from '@/utils'
import { Queryurcontact } from '@/api/purchase'

export default {
  data() {
    return {
      files: "",
      dialogFormVisible: false,
      dialogForm4Visible: false,
      contractData: { },
      exQuery:{ },
      billData:{},
      rules: {//校验规则
        contractType: [{ required: true, message: '类型为必填项', trigger: 'change' }],
        contractNum: [{ required: true, message: '合同编号为必填项', trigger: 'blur' }],
        contractDate: [{type: 'date', required: true, message: '合同时间为必填项', trigger: 'blur' }],
        supplier: [{ required: true, message: '供应商为必填项', trigger: 'blur' }],
        contractMoney: [{required: true, message: '合同金额为必填项', trigger: 'blur' }],
        // files: [{ required: true, message: '附件为必填项', trigger: 'change' }]
      },
      list: null,
      listLoading: true,
      //下拉选项
      options: [{
          value: '过单',
          label: '过单'
        }, {
          value: '进货',
          label: '进货'
        }, {
          value: '进票',
          label: '进票'
        }],
      queryStatusoptions: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '作废'
      }],
      queryTypeoptions: [{
        value: '自用',
        label: '自用'
      }, {
        value: '报废',
        label: '报废'
      }],
      optionsquery: [{
        value: '0',
        label: '未开票'
      }, {
        value: '1',
        label: '部分开票'
      }, {
        value: '2',
        label: '已开票'
      }],
      optionsBill:[{
        value: '1%',
        label: '1%'
      }, {
        value: '6%',
        label: '6%'
      }, {
        value: '9%',
        label: '9%'
      }, {
        value: '13%',
        label: '13%'
      }],
      fileList: [],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
      drawer: false

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //查询
    handleQuery() {
      let Querydata = new FormData()
      Querydata.append("currentPage", this.pagination.currentPage)
      Querydata.append("pageSize", this.pagination.pageSize)
      if (this.exQuery.exNum != null&&this.exQuery.exNum != "")
        Querydata.append("exNum", this.exQuery.exNum)
      if (this.exQuery.type != null)
        Querydata.append("type", this.exQuery.type)
      if (this.exQuery.status != null)
        Querydata.append("status", this.exQuery.status)
      api.QueryEx(Querydata).then(resp => {
          this.list = resp.data.ExList
          this.pagination.currentPage = resp.data.page.number + 1
          this.pagination.pageSize = resp.data.page.size
          this.pagination.total = resp.data.page.totalElements
          this.listLoading = false
        }
      )
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      // param = "?type="+this.pagination.type
      // param += "&name="+this.pagination.name
      // param += "&description="+this.pagination.description
      // axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{

      api.getList(this.pagination).then(response => {
        this.list = response.data.purContractList
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        }
      )
    },

    fetchData() {
      this.listLoading = true

      this.getAll()
    },
    //弹出添加框
    handleCreate() {
      this.contractData={}
      this.dialogFormVisible = true
    },
    //添加合同操作
    handleAdd(){
      this.$refs.dataAddForm.validate((valid)=>{
        if(!valid){
          this.$message.warning(valid)
          return false
        }else {
          for (let i = 0; i < this.fileList.length; i++) {
            //this.fileList[i].raw:获取图片格式
            //这里的file必须和后端Controller中的requestparam参数一致，才能上传成功，否则会报400错误
            this.data.append("file", this.fileList[i].raw, this.fileList[i].name);
          }
          // this.$refs.upload.submit()
          this.data.append('contractMoney',this.contractData.contractMoney)
          this.data.append('contractNum',this.contractData.contractNum)
          this.data.append('contractDate',this.contractData.contractDate)
          this.data.append('contractType',this.contractData.contractType)
          if(typeof(this.contractData.remarks)!='undefined'){
            this.data.append('remarks',this.contractData.remarks)
          }
          this.data.append('supplier',this.contractData.supplier)
          api.addPurcontact(this.data).then((res) => {
            if(res.success)
              this.$message.success("新增成功")
            else
              this.$message.warning(res.message)
          }).catch(
          ).finally(
            this.cancel(),
            this.getAll()
          )
        }
      })

    },
    //弹出修改框
    handleChange(row) {
      getById(row.id).then(res=>{
        this.contractData = res.data.purContact
        this.dialogForm4Visible = true
      })
    },
    //修改操作
    handleUpdate() {
      // console.log(this.contractData.id)
      UpdatePurcontact(this.contractData).then(res=>{
        if(res.success)
          this.$message.success("更新成功")
        else
          this.$message.success("更新失敗")
      }).finally(
        this.dialogForm4Visible = false
      )

    },
    //取消按钮
    cancel() {
      this.dialogForm4Visible = false
      this.dialogFormVisible = false
      this.contractData = {}
      this.data = {}
      this.fileList= []
      this.$refs.dataAddForm.resetFields()
      this.$refs.upload.clearFiles()
    },
    //文件上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    change(file,fileList){
      const data = new FormData()
      this.data = data
      this.fileList = fileList
    },
    httpRequest(param) {
      const fileObj = param.file // 相当于input里取得的files
      this.data.append('FileArray', fileObj)// 文件对象
    },
    handledrawerClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //发票上传
    handleBillAdd(){

    },
    //弹出折叠面板
    toogleExpand(row) {
      const purTable = this.$refs.purTable
      // 注意，这里的 this.list 是上面 data 中的 list
      // 通过比对数据与行里的数据，对展开行进行控制，获取对应值
      this.list.map((item) => {
        if (row.id !== item.id) {
          purTable.toggleRowExpansion(item, false)
        }
      })
      purTable.toggleRowExpansion(row)
    },
    addBillRow(){
      let billRowData = {
        modle:"",
        goodsName:"",
        xx1:"",
        xx2:"",
        xx3:"",
        xx4:""
      }
      this.billData.billGood.unshift(billRowData)
      this.billData.billGood.row.$index += 1
    }

  },
  computed: {

  }
}
</script>
